<template>
    <div class="wrap">
        <Top text="确认订单"/>
        <div class="location" @click="select">
            <div class="content">
                 <div class="noselect" v-if="!isShow" @click="select">
                    <p class="title">选择收货地址</p>
                    <span>></span>
                 </div>

                 <div class="select" v-else-if="isShow">
                    <div class="address">
                        {{getAddress.address}}
                    </div>
                    <div class="bugPhoto">
                        <div class="name"> {{getAddress.name}}</div>
                        <div class="phone">{{getAddress.phone}}</div>
                    </div>
                    <p class="right">></p>
                 </div>
            </div>
        </div>

        <div class="list">
            <div class="goods-list">
                <p>商品列表</p>
                <Item
                    v-for="item in shoppingCarList" :key="item._id"
                    :data="item"
                />
            </div>
        </div>

        <div class="submit">
            <div class="left">
                <p>待支付：<span class="price">￥{{getSum}}</span></p>
                <p class="peisong">另需配送费2元</p>
            </div>
            <div class="right">
                <p @click="pay">去支付</p>
            </div>
        </div>
        
        <SelectAddress :data="locationList" v-show="isSelect"/>
        <Tip v-show="tips.isTips" :tipsText="tips.tipText"/>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Item from '@/views/Settlement/goodsItem'
    import SelectAddress from '@/views/Settlement/selectAddress'
    export default {
        name:"Settlement-View",
        components:{ Item,  SelectAddress },
        data(){
            return {
                isSelect:false,
                isShow: JSON.parse(localStorage.getItem('bugAddress')) ? true : false
             }
        },
        methods:{
            // 发送打开
            select(){
                this.isSelect = true
                this.$bus.$emit('open',this.isSelect)
            },

            // 支付
            pay(){
                const info = {
                    sum: this.getSum,
                    goods: this.shoppingCarList,
                    address: this.getAddress
                }
                this.$store.dispatch('Home/addOrder',info)
                this.$store.dispatch('Home/removeCar')
                setTimeout(()=>{
                    this.$router.push('/home')
                    
                },1000)
            }
        },
        computed:{
            ...mapState('Home',['shoppingCarList','tips']),
            ...mapState('About',['locationList']),


             // 计算总和
            getSum(){
                let sum = 0
                this.shoppingCarList.forEach(item => {
                    sum = sum + parseFloat(item.goods_price * item.num)
                })
                sum = sum + 2
                return sum.toFixed(2)
            },

            // 获取选择地址
            getAddress(){
                const address = JSON.parse(localStorage.getItem('bugAddress'))
                return address
            }
        },
        created() {
            // 获取购物车数据
            this.$store.dispatch('Home/searchGoodsIntheCar')

            // 获取地址列表数据
            this.$store.dispatch('About/getLocationList')
        },
        mounted() {
            // 获取关闭数据
            this.$bus.$on('close',isOpen => this.isSelect = isOpen)
        },
        beforeDestroy() {
            this.$bus.$off('close')
        },
    }
</script>

<style scoped lang='less'>
    .select{
        height: 26.7vw;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding: 0 15px;
        position: relative;

        .right{
            position: absolute;
            right: 15px;
            font-size: 20px;
            color: #ccc;
        }
        
        .address{
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .bugPhoto{
            display: flex;
            color: #333;
            font-weight: 600;
            font-size: 14px;

            .name{
               
                margin-right: 20px;
            }
        }
    }

    .submit{
        display: flex;
        width: 100%;
        height: 18.7vw;
        background: #fff;
        position: fixed;
        bottom: 0;
        box-shadow: 2.7vw -1.3vw 2.7vw 2.7vw rgba(0, 0, 0, 0.062);

        .left{
            width: 70%;
            display: flex;
            height: 18.7vw;
            align-items: center;
            padding-left:4vw;
            
            p{
                font-size: 3.7vw;
                span{
                    font-size: 4.8vw;
                    color: red;
                    font-weight: 700;
                }
            }

            .peisong{
                font-size: 3.2vw;
                margin-left: 5.3vw;
            }
        }

        .right{
            height: 18.7vw;
            width: 26%;
            display: flex;
            align-items: center;
            p{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #1272FE;
                color: #fff;
                font-size: 3.7vw;
                font-weight: 700;
            }
        }
        
    }
    .wrap{
        width: 100%;
        height: 100%; 
    }

    .location{
            padding: 2.7vw 0;
            width: 95%;
            margin: 0 auto;
            background: #fff;
            height: 26.7vw;
            border-radius: 2.7vw;
            box-shadow: 1.3vw 1.3vw 1.3vw 1.3vw rgba(204, 204, 204, 0.11);
            display: flex;


            .content{
                width: 100%;
                height: 26.7vw;
            }
            

            .noselect{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0 2.7vw;
                align-items: center;
            }
            

            .title{
                font-size: 4.8vw;
                letter-spacing: 0.3vw;
                color: #333;
            }

            span{
                color: rgb(184, 181, 181);
                font-size: 5.3vw;

            }
    }

    .list{
        background: #fff;
        width: 95%;
        margin: 0 auto;
        padding: 4vw 0 18.7vw 0;
        margin-top: 4vw;
        box-shadow: 1.3vw 1.3vw 1.3vw 1.3vw rgba(204, 204, 204, 0.11);
        

        p{
            font-size: 3.7vw;
            font-weight: 600;
            padding: 0 2.7vw 2.7vw 2.7vw
        }
    }
    
</style>